<script lang="ts" setup>
import type { KeyBoardBtnGroup } from './type'

import { ref } from 'vue'
import { getKeyBoardBtns } from './utils/keyBoardBtns'

const props = defineProps({
  type: {
    type: String,
    required: true,
  },
})

const keyBoardBtns = ref<KeyBoardBtnGroup>(getKeyBoardBtns(props.type))
</script>

<template>
  <div class="key_board">
    <div v-for="(item, index) in keyBoardBtns" :key="index" class="key_board_row">
      <div v-for="(btn, btnIndex) in item" :key="btnIndex" class="key_board_btn">
        <div class="key_board_btn_content"
        :type="btn.type || 'normal'"
        :style="{ width: `${btn.width * 50}px`, marginLeft: `${btn.offset * 10}px` }">
          {{ btn.label }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.key_board {
  min-width: 500px;
  min-height: 300px;
  padding: 20px;
  border-radius: 10px;
  background-color: var(--color-keyboard-bg);
  box-shadow: var(--el-box-shadow-light);
  display: flex;
  flex-direction: column;

  .key_board_row {
    display: flex;
  }

  .key_board_btn {
    height: 50px;
    padding: 5px;

    .key_board_btn_content {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      color: var(--color-keyboard-text);
      font-size: 14px;
      font-weight: bold;
      background-color: var(--color-keyboard-normal);
      transition: all .3s ease-in-out;
      user-select: none;

      &[type="function"] {
        background-color: var(--color-keyboard-function);
        font-size: 12px;
      }

      &:hover {
        filter: brightness(1.2);
        transition: 0s;
      }
    }
  }
}
</style>
